<template>
    <a style="margin-right: 20px;" @click="toggle" class="cursor-pointer">{{
            store.getters.userInfo.username
        }}
    </a>
    <Menu ref="menu" id="overlay_menu" :model="items" :popup="true"/>
    <Dialog v-model:visible="visible" modal header="用户密码修改" position="top">
        <form @submit='onSubmit'>
            <div class="mt-4 flex items-center gap-4">
                <label for="oriPassword" class="text-sm font-semibold text-right w-16">旧密码</label>
                <div class="flex-1">
                    <InputText id="oriPassword" v-model="oriPassword" class="w-full" autocomplete="off"/>
                    <small class="text-red-500">{{ errors.oriPassword }}</small>
                </div>
            </div>

            <div class="mt-4 flex items-center gap-4">
                <label for="newPassword" class="text-sm font-semibold text-right w-16">新密码</label>
                <div class="flex-1">
                    <InputText id="newPassword" v-model="newPassword" class="w-full" autocomplete="off"/>
                    <small class="text-red-500">{{ errors.newPassword }}</small>
                </div>
            </div>

            <div class="mt-4 flex items-center gap-4">
                <label for="confirmPassword" class="text-sm font-semibold text-right w-16">确认密码</label>
                <div class="flex-1">
                    <InputText id="confirmPassword" v-model="confirmPassword" class="w-full" autocomplete="off"/>
                    <small class="text-red-500">{{ errors.confirmPassword }}</small>
                </div>
            </div>

            <div class="flex justify-end gap-2  mt-3">
                <Button type="button" label="取消" severity="secondary"
                        @click="() => visible = false"></Button>
                <Button type="submit" label="提交"></Button>
            </div>
        </form>
    </Dialog>
    <Toast/>
</template>
<script setup>
import {ref, watch} from "vue";
import * as yup from "yup";
import {useStore} from "vuex";
import {useForm} from "vee-validate";
import {useToast} from "primevue/usetoast";
import Toast from "primevue/toast";
import router from '@/router'

const store = useStore();


const visible = ref(false)

const menu = ref();
const items = ref([
    {
        label: '修改密码',
        icon: 'pi pi-user-edit',
        command: () => {
            visible.value = true
        }
    },
    {
        label: '退出',
        icon: 'pi pi-sign-out',
        command: async () => {
            await handleLogout()
        }
    }
])

const handleLogout = () => {
    store.dispatch('Logout').then(() => {
        router.push({path: '/user/login'})
    })
}
const toggle = (event) => {
    menu.value.toggle(event);
}

let createSchema = yup.object().shape({
    oriPassword: yup.string().max(20, '字符长度过多').required('请输入脚本名称').required('该项必填'),
    newPassword: yup.string().min(6, '密码长度过少').max(30, '字符长度过多').required('该项必填'),
    confirmPassword: yup.string().required('该项必填').test('confirmPassword', '密码不匹配', () => {
        if (confirmPassword.value === newPassword.value) {
            return true
        }
        return false
    }),
});

const {defineField, handleSubmit, resetForm, errors} = useForm({
    validationSchema: createSchema,
});

const [oriPassword] = defineField('oriPassword');
const [newPassword] = defineField('newPassword');
const [confirmPassword] = defineField('confirmPassword');

const onSubmit = handleSubmit(async (values) => {
    const result = await ApiChangePassword(values)
    if (result.code === 0) {
        toast.add({severity: 'success', summary: '成功', detail: result.msg, life: 3000});
        visible.value = false
    } else {
        toast.add({severity: 'danger', summary: '失败', detail: result.msg, life: 3000});
    }

})
</script>